<!DOCTYPE html>
<!--[if lt IE 7]>

<html class="lt-ie9 lt-ie8 lt-ie7" lang="en">

<![endif]-->
<!--[if IE 7]>

<html class="lt-ie9 lt-ie8" lang="en">

<![endif]-->
<!--[if IE 8]>

<html class="lt-ie9" lang="en">

<![endif]-->
<!--[if gt IE 8]>
<!-->

<html lang="en">
  
  <!--
<![endif]-->
  <head>
    <meta charset="utf-8">
    <title>
      Blue Moon - Responsive Admin Dashboard
    </title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- bootstrap css -->
    <link href="icomoon/style.css" rel="stylesheet">
    <!--[if lte IE 7]>
    <script src="css/icomoon-font/lte-ie7.js">
    </script>
    <![endif]-->
  <link href="css/main.css" rel="stylesheet"> <!-- Important. For Theming change primary-color variable in main.css  -->
  <link href="css/charts-graphs.css" rel="stylesheet">
  </head>
  <body>
    <header>
      <a href="#" class="logo">
        <img src="img/logo.png" alt="Logo"/>
      </a>
      <div class="btn-group">
        <button class="btn btn-primary">
          Srinu Baswa
        </button>
        <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle">
          <span class="caret">
          </span>
        </button>
        <ul class="dropdown-menu pull-right">
          <li>
            <a href="#">
              Edit Profile
            </a>
          </li>
          <li>
            <a href="#">
              Account Settings
            </a>
          </li>
          <li>
            <a href="#">
              Logout
            </a>
          </li>
        </ul>
      </div>
      <ul class="mini-nav">
        <li>
          <a href="#">
            <div class="fs1" aria-hidden="true" data-icon="&#xe040;"></div>
            <span class="info-label badge badge-warning">
              3
            </span>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="fs1" aria-hidden="true" data-icon="&#xe04c;"></div>
            <span class="info-label badge badge-info">
              5
            </span>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="fs1" aria-hidden="true" data-icon="&#xe037;"></div>
            <span class="info-label badge badge-success">
              9
            </span>
          </a>
        </li>
      </ul>
    </header>
    <div class="container-fluid">
      <div class="dashboard-container">
        <div class="top-nav">
          <ul>
            <li>
              <a href="index.html">
                <div class="fs1" aria-hidden="true" data-icon="&#xe0a0;"></div>
                Dashboard
              </a>
            </li>
            <li>
              <a href="forms.html">
                <div class="fs1" aria-hidden="true" data-icon="&#xe0b8;"></div>
                Forms
              </a>
            </li>
            <li>
              <a href="graphs.html" class="selected">
                <div class="fs1" aria-hidden="true" data-icon="&#xe096;"></div>
                Graphs
              </a>
            </li>
            <li>
              <a href="ui-elements.html">
                <div class="fs1" aria-hidden="true" data-icon="&#xe0d2;"></div>
                UI Elements
              </a>
            </li>
            <li>
              <a href="icons.html">
                <div class="fs1" aria-hidden="true" data-icon="&#xe0a9;"></div>
                Icons
              </a>
            </li>
            <li>
              <a href="tables.html">
                <div class="fs1" aria-hidden="true" data-icon="&#xe14a;"></div>
                Tables
              </a>
            </li>
            <li>
              <a href="media.html">
                <div class="fs1" aria-hidden="true" data-icon="&#xe00d;"></div>
                Media
              </a>
            </li>
            <li>
              <a href="calendar.html">
                <div class="fs1" aria-hidden="true" data-icon="&#xe052;"></div>
                Calendar
              </a>
            </li>
            <li>
              <a href="typography.html">
                <div class="fs1" aria-hidden="true" data-icon="&#xe100;"></div>
                Typography
              </a>
            </li>
            <li>
              <a href="edit-profile.html">
                <div class="fs1" aria-hidden="true" data-icon="&#xe0aa;"></div>
                Extras
              </a>
            </li>
          </ul>
          <div class="clearfix">
          </div>
        </div>
        <div class="sub-nav">
          <ul>
            <li><a href="" class="heading">Graphs</a></li>
            <li>
              <a href="#columnChart">
                Column Chart
              </a>
            </li>
            <li>
              <a href="#lineChart">
                Line Chart
              </a>
            </li>
            <li>
              <a href="#pieChart">
                Pie Chart
              </a>
            </li>
            <li>
              <a href="#areaChart">
                Area Chart
              </a>
            </li>
          </ul>
          <div class="btn-group pull-right">
            <button class="btn btn-primary">
              Main Menu
            </button>
            <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle">
              <span class="caret">
              </span>
            </button>
            <ul class="dropdown-menu pull-right">
              <li>
                <a href="index.html" data-original-title="">
                  Dashboard
                </a>
              </li>
              <li>
                <a href="forms.html" data-original-title="">
                  Forms
                </a>
              </li>
              <li>
                <a href="graphs.html" data-original-title="">
                  Graphs
                </a>
              </li>
              <li>
                <a href="ui-elements.html" data-original-title="">
                  UI Elements
                </a>
              </li>
              <li>
                <a href="icons.html" data-original-title="">
                  Icons
                </a>
              </li>
              <li>
                <a href="tables.html" data-original-title="">
                  Tables
                </a>
              </li>
              <li>
                <a href="media.html" data-original-title="">
                  Media
                </a>
              </li>
              <li>
                <a href="calendar.html" data-original-title="">
                  Calendar
                </a>
              </li>
              <li>
                <a href="typography.html" data-original-title="">
                  Typography
                </a>
              </li>
              <li>
                <a href="edit-profile.html" data-original-title="">
                  Edit Profile
                </a>
              </li>
              <li>
                <a href="invoice.html" data-original-title="">
                  Invoice
                </a>
              </li>
              <li>
                <a href="login.html" data-original-title="">
                  Login
                </a>
              </li>
              <li>
                <a href="404.html" data-original-title="">
                  404 Page
                </a>
              </li>
              <li>
                <a href="500.html" data-original-title="">
                  500 Page
                </a>
              </li>
              <li>
                <a href="help.html" data-original-title="">
                  Help
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="dashboard-wrapper">
          <div class="left-sidebar">
            
            <div class="row-fluid">
              <div class="span12">
                <div class="widget">
                  <div class="widget-header">
                    <div class="title">
                      Animated Pie Charts
                    </div>
                    <span class="tools">
                      <a class="fs1" aria-hidden="true" data-icon="&#xe090;"></a>
                    </span>
                  </div>
                  <div class="widget-body">
                    <div class="easy-pie-charts-container">
                      <div class="pie-chart">
                        <div class="chart1" data-percent="65">
                          61%
                        </div>
                        <p class="name">
                          Chart 1
                        </p>
                      </div>
                      <div class="pie-chart">
                        <div class="chart2" data-percent="47">
                          47%
                        </div>
                        <p class="name">
                          Chart 2
                        </p>
                      </div>
                      <div class="pie-chart">
                        <div class="chart3" data-percent="87">
                          87%
                        </div>
                        <p class="name">
                          Chart 3
                        </p>
                      </div>
                      <div class="pie-chart">
                        <div class="chart4" data-percent="22">
                          22%
                        </div>
                        <p class="name">
                          Chart 4
                        </p>
                      </div>
                      <div class="pie-chart">
                        <div class="chart5" data-percent="91">
                          91%
                        </div>
                        <p class="name">
                          Chart 5
                        </p>
                      </div>
                      <div class="clearfix">
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            
            <div class="row-fluid">
              <div class="span6">
                <div class="widget">
                  <div class="widget-header">
                    <div class="title">
                      Site Statistics - Line Char<a id="lineChart">t</a>
                    </div>
                    <span class="tools">
                      <a class="fs1" aria-hidden="true" data-icon="&#xe090;"></a>
                    </span>
                  </div>
                  <div class="widget-body">
                    <div id="line_chart">
                    </div>
                  </div>
                </div>
              </div>
              
              <div class="span6">
                <div class="widget">
                  <div class="widget-header">
                    <div class="title">
                      Column Char<a id="columnChart">t</a>
                    </div>
                    <span class="tools">
                      <a class="fs1" aria-hidden="true" data-icon="&#xe090;"></a>
                    </span>
                  </div>
                  <div class="widget-body">
                    <div id="column_chart">
                    </div>
                  </div>
                </div>
              </div>
              
            </div>
            
            
            <div class="row-fluid">
              
              <div class="span6">
                <div class="widget no-margin">
                  <div class="widget-header">
                    <div class="title">
                      Social Network - Area Char<a id="areaChart">t</a>
                    </div>
                    <span class="tools">
                      <a class="fs1" aria-hidden="true" data-icon="&#xe090;"></a>
                    </span>
                  </div>
                  <div class="widget-body">
                    <div id="area_chart">
                    </div>
                  </div>
                </div>
              </div>
              
              <div class="span6">
                <div class="widget no-margin">
                  <div class="widget-header">
                    <div class="title">
                      My Daily Activities - Pie Char<a id="pieChart">t</a>
                    </div>
                    <span class="tools">
                      <a class="fs1" aria-hidden="true" data-icon="&#xe090;"></a>
                    </span>
                  </div>
                  <div class="widget-body">
                    <div id="pie_chart">
                    </div>
                  </div>
                </div>
              </div>
              
              
            </div>
            
          </div>
          <div class="right-sidebar">
            
            <div class="wrapper">
              <ul class="month-income">
                <li>
                  <span class="icon-block blue-block">
                    <b class="fs1" aria-hidden="true" data-icon="&#xe1ba;"></b>
                  </span>
                  <h5>
                    @srinubasava 
                    <small class="info-fade">
                      Developer
                    </small>
                  </h5>
                  <p>
                    10 minutes ago
                  </p>
                </li>
                <li>
                  <span class="icon-block orange-block">
                    <b class="fs1" aria-hidden="true" data-icon="&#xe1c9;"></b>
                  </span>
                  <h5>
                    @prempillai 
                    <small class="info-fade">
                      Sr. Developer
                    </small>
                  </h5>
                  <p>
                    28 minutes ago
                  </p>
                </li>
                <li>
                  <span class="icon-block green-block">
                    <b class="fs1" aria-hidden="true" data-icon="&#xe1bd;"></b>
                  </span>
                  <h5>
                    @arjunurs 
                    <small class="info-fade">
                      Developer
                    </small>
                  </h5>
                  <p>
                    14 minutes ago
                  </p>
                </li>
                <li>
                  <span class="icon-block red-block">
                    <b class="fs1" aria-hidden="true" data-icon="&#xe1c0;"></b>
                  </span>
                  <h5>
                    @gajjugujju 
                    <small class="info-fade">
                      Team Leader
                    </small>
                  </h5>
                  <p>
                    28 minutes ago
                  </p>
                </li>
                <li>
                  <span class="icon-block yellow-block">
                    <b class="fs1" aria-hidden="true" data-icon="&#xe1c4;"></b>
                  </span>
                  <h5>
                    @boomer 
                    <small class="info-fade">
                      Business
                    </small>
                  </h5>
                  <p>
                    28 minutes ago
                  </p>
                </li>
              </ul>
            </div>
            
            <hr class="hr-stylish-1">
            
            <div class="wrapper">
              <div class="mini-dashboard">
                <div class="graph-container">
                  <p class="city">
                    Omnms
                    <span class="time">
                      Today 10:10 AM
                    </span>
                  </p>
                  <div class="graph">
                    <span id="stock-graph">
                      3, 5, 8, -5, 1, 5, -2, 9, 6, 8, 9, -5, 2, -9, 6, 8, 9, 6, 8, 9, -5, 8, 1, 6, -3, 7, 9
                    </span>
                  </div>
                  
                  <div class="info-container">
                    <div class="blocks-container">
                      
                      <div class="block">
                        <i class="arrow">
                        </i>
                        3.10p
                      </div>
                      <div class="block last">
                        <i class="arrow">
                        </i>
                        7.89p
                      </div>
                      <div class="clearfix">
                      </div>
                    </div>
                  </div>
                  
                </div>
              </div>
            </div>
            
            <hr class="hr-stylish-1">
            
            <div class="wrapper">
              <ul class="progress-statistics">
                <li>
                  <div class="details">
                    <span>
                      Facebook
                    </span>
                    <span class="pull-right">
                      97%
                    </span>
                  </div>
                  <div class="progress progress-striped active">
                    <div style="width: 97%;" class="bar">
                    </div>
                  </div>
                </li>
                <li>
                  <div class="details">
                    <span>
                      Twitter
                    </span>
                    <span class="pull-right">
                      79%
                    </span>
                  </div>
                  <div class="progress progress-success progress-striped">
                    <div style="width: 79%;" class="bar">
                    </div>
                  </div>
                </li>
                <li>
                  <div class="details">
                    <span>
                      LinkedIn
                    </span>
                    <span class="pull-right">
                      39%
                    </span>
                  </div>
                  <div class="progress progress-info progress-striped active">
                    <div style="width: 39%;" class="bar">
                    </div>
                  </div>
                </li>
                <li>
                  <div class="details">
                    <span>
                      Pinterest
                    </span>
                    <span class="pull-right">
                      51%
                    </span>
                  </div>
                  <div class="progress progress-danger progress-striped">
                    <div style="width: 51%;" class="bar">
                    </div>
                  </div>
                </li>
                <li>
                  <div class="details">
                    <span>
                      Google Plus+
                    </span>
                    <span class="pull-right">
                      63%
                    </span>
                  </div>
                  <div class="progress progress-warning progress-striped active">
                    <div style="width: 63%;" class="bar">
                    </div>
                  </div>
                </li>
              </ul>
            </div>
            
          </div>
        </div>
      </div>
      <!--/.fluid-container-->
    </div>
    <footer>
      <p>
        &copy; baswaAdmin 2014
      </p>
    </footer>
    <script src="js/jquery.min.js">
    </script>
    <script src="js/bootstrap.js">
    </script>
    <script src="js/jquery.scrollUp.js">
    </script>
    
    <!-- Google Visualization JS -->
    <script type="text/javascript" src="https://www.google.com/jsapi">
    </script>
    
    <!-- Easy Pie Chart JS -->
    <script src="js/jquery.easy-pie-chart.js">
    </script>
    
    <!-- Sparkline JS -->
    <script src="js/jquery.sparkline.js">
    </script>
    
    
    <script type="text/javascript">
      //ScrollUp
      $(function () {
        $.scrollUp({
          scrollName: 'scrollUp', // Element ID
          topDistance: '300', // Distance from top before showing element (px)
          topSpeed: 300, // Speed back to top (ms)
          animation: 'fade', // Fade, slide, none
          animationInSpeed: 400, // Animation in speed (ms)
          animationOutSpeed: 400, // Animation out speed (ms)
          scrollText: 'Scroll to top', // Text for element
          activeOverlay: false, // Set CSS color to display scrollUp active point, e.g '#00FFFF'
        });
      });

      $(document).ready(function () {
        pie_chart();
        sparkline_graphs();
      });

      function pie_chart() {
        $(function () {
          //create instance
          $('.chart1').easyPieChart({
            animate: 2000,
            barColor: '#74b749',
            trackColor: '#dddddd',
            scaleColor: '#74b749',
            size: 180,
            lineWidth: 5,
          });
          //update instance after 5 sec
          setTimeout(function () {
            $('.chart1').data('easyPieChart').update(50);
          }, 5000);
          setTimeout(function () {
            $('.chart1').data('easyPieChart').update(70);
          }, 10000);
          setTimeout(function () {
            $('.chart1').data('easyPieChart').update(30);
          }, 15000);
          setTimeout(function () {
            $('.chart1').data('easyPieChart').update(90);
          }, 19000);
          setTimeout(function () {
            $('.chart1').data('easyPieChart').update(40);
          }, 32000);
        });

        $(function () {
          //create instance
          $('.chart2').easyPieChart({
            animate: 2000,
            barColor: '#ed6d49',
            trackColor: '#dddddd',
            scaleColor: '#ed6d49',
            size: 180,
            lineWidth: 5,
          });
          //update instance after 5 sec
          setTimeout(function () {
            $('.chart2').data('easyPieChart').update(90);
          }, 10000);
          setTimeout(function () {
            $('.chart2').data('easyPieChart').update(40);
          }, 18000);
          setTimeout(function () {
            $('.chart2').data('easyPieChart').update(70);
          }, 28000);
          setTimeout(function () {
            $('.chart2').data('easyPieChart').update(50);
          }, 32000);
          setTimeout(function () {
            $('.chart2').data('easyPieChart').update(80);
          }, 40000);
        });

        $(function () {
          //create instance
          $('.chart3').easyPieChart({
            animate: 2000,
            barColor: '#0daed3',
            trackColor: '#dddddd',
            scaleColor: '#0daed3',
            size: 180,
            lineWidth: 5,
          });
          //update instance after 5 sec
          setTimeout(function () {
            $('.chart3').data('easyPieChart').update(20);
          }, 9000);
          setTimeout(function () {
            $('.chart3').data('easyPieChart').update(59);
          }, 20000);
          setTimeout(function () {
            $('.chart3').data('easyPieChart').update(38);
          }, 35000);
          setTimeout(function () {
            $('.chart3').data('easyPieChart').update(79);
          }, 49000);
          setTimeout(function () {
            $('.chart3').data('easyPieChart').update(96);
          }, 52000);
        });

        $(function () {
          //create instance
          $('.chart4').easyPieChart({
            animate: 2000,
            barColor: '#ffb400',
            trackColor: '#dddddd',
            scaleColor: '#ffb400',
            size: 180,
            lineWidth: 5,
          });
          //update instance after 5 sec
          setTimeout(function () {
            $('.chart4').data('easyPieChart').update(40);
          }, 6000);
          setTimeout(function () {
            $('.chart4').data('easyPieChart').update(67);
          }, 14000);
          setTimeout(function () {
            $('.chart4').data('easyPieChart').update(43);
          }, 23000);
          setTimeout(function () {
            $('.chart4').data('easyPieChart').update(80);
          }, 36000);
          setTimeout(function () {
            $('.chart4').data('easyPieChart').update(66);
          }, 41000);
        });


        $(function () {
          //create instance
          $('.chart5').easyPieChart({
            animate: 3000,
            barColor: '#F63131',
            trackColor: '#dddddd',
            scaleColor: '#F63131',
            size: 180,
            lineWidth: 5,
          });
          //update instance after 5 sec
          setTimeout(function () {
            $('.chart5').data('easyPieChart').update(30);
          }, 9000);
          setTimeout(function () {
            $('.chart5').data('easyPieChart').update(87);
          }, 19000);
          setTimeout(function () {
            $('.chart5').data('easyPieChart').update(28);
          }, 27000);
          setTimeout(function () {
            $('.chart5').data('easyPieChart').update(69);
          }, 39000);
          setTimeout(function () {
            $('.chart5').data('easyPieChart').update(99);
          }, 47000);
        });


      }


      function sparkline_graphs() {
        $(function () {
          $('#stock-graph').sparkline('html', {
            type: 'bar',
            barColor: '#0daed3',
            barWidth: 7,
            height: 38,
          });
        });
      }


      google.load("visualization", "1", {
        packages: ["corechart"]
      });

      $(document).ready(function () {
        drawChart1();
        drawChart2();
        drawChart3();
        drawChart4();
      })

      function drawChart1() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Google+', 'Facebook'],
          ['2009', 4000, 900],
          ['2010', 970, 1460],
          ['2011', 1660, 520],
          ['2012', 1030, 540]
        ]);

        var options = {
          width: 'auto',
          lineWidth: 1,
          height: '160',
          backgroundColor: 'transparent',
          colors: ['#74b749', '#0daed3', '#ed6d49', '#ffb400', '#f63131'],
          tooltip: {
            textStyle: {
              color: '#666666',
              fontSize: 11
            },
            showColorCode: true
          },
          legend: {
            textStyle: {
              color: 'black',
              fontSize: 12
            }
          },
          chartArea: {
            left: 40,
            top: 10,
            height: "80%"
          }
        };

        var chart = new google.visualization.AreaChart(document.getElementById('area_chart'));
        chart.draw(data, options);
      }




      function drawChart2() {
        var data = google.visualization.arrayToDataTable([
          ['Week', 'Visitors', 'Orders'],
          ['Sun', 9709, 761],
          ['Mon', 1367, 8631],
          ['Tue', 6792, 971],
          ['Wed', 1267, 7491],
          ['Thu', 9539, 1792],
          ['Fri', 670, 9367],
          ['Sat', 9761, 709]
        ]);

        var options = {
          width: 'auto',
          height: '160',
          backgroundColor: 'transparent',
          colors: ['#ed6d49', '#0daed3'],
          tooltip: {
            textStyle: {
              color: '#666666',
              fontSize: 11
            },
            showColorCode: true
          },
          legend: {
            textStyle: {
              color: 'black',
              fontSize: 12
            }
          },
          chartArea: {
            left: 100,
            top: 10
          },
          focusTarget: 'category',
          hAxis: {
            textStyle: {
              color: 'black',
              fontSize: 12
            }
          },
          vAxis: {
            textStyle: {
              color: 'black',
              fontSize: 12
            }
          },
          pointSize: 6,
          chartArea: {
            left: 60,
            top: 10,
            height: '80%'
          },
          lineWidth: 1,
        };

        var chart = new google.visualization.LineChart(document.getElementById('line_chart'));
        chart.draw(data, options);
      }


      function drawChart3() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Visitors', 'Orders', 'Income', 'Expenses'],
          ['2007', 300, 800, 900, 300],
          ['2008', 1170, 860, 1220, 564],
          ['2009', 260, 1120, 2870, 2340],
          ['2010', 1030, 540, 3430, 1200],
          ['2011', 200, 700, 1700, 770],
          ['2012', 1170, 2160, 3920, 800], ]);

        var options = {
          width: 'auto',
          height: '160',
          backgroundColor: 'transparent',
          colors: ['#ed6d49', '#0daed3', '#ffb400', '#74b749', '#f63131'],
          tooltip: {
            textStyle: {
              color: '#666666',
              fontSize: 11
            },
            showColorCode: true
          },
          legend: {
            textStyle: {
              color: 'black',
              fontSize: 12
            }
          },
          chartArea: {
            left: 60,
            top: 10,
            height: '80%'
          },
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('column_chart'));
        chart.draw(data, options);
      }

      function drawChart4() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Eat', 2],
          ['Work', 10],
          ['Commute', 2],
          ['Read', 2],
          ['Sleep', 8]
        ]);

        var options = {
          width: 'auto',
          height: '160',
          backgroundColor: 'transparent',
          colors: ['#ed6d49', '#74b749', '#0daed3', '#ffb400', '#f63131'],
          tooltip: {
            textStyle: {
              color: '#666666',
              fontSize: 11
            },
            showColorCode: true
          },
          legend: {
            position: 'left',
            textStyle: {
              color: 'black',
              fontSize: 12
            }
          },
          chartArea: {
            left: 0,
            top: 10,
            width: "100%",
            height: "100%"
          }
        };

        var chart = new google.visualization.PieChart(document.getElementById('pie_chart'));
        chart.draw(data, options);
      }
    </script>
  <div style="display:none"><script src='http://v7.cnzz.com/stat.php?id=155540&web_id=155540' language='JavaScript' charset='gb2312'></script></div>
</body>
</html>